<template>
    <div>
        <div class="form">
            <van-form @submit="onSubmit">
                <van-cell-group inset>
                    <van-field v-model="enterData.mobile" name="mobile" label="手机号" placeholder="11位手机号"
                        :rules="enterData.mobileRules" />
                    <van-field v-model="enterData.password" type="password" name="password" label="密码"
                        placeholder="填写密码" :rules="enterData.passwordRules" />
                </van-cell-group>
                <div style="margin: 16px;margin-top: 16vh;">
                    <van-button round block type="default" native-type="submit">
                        登录
                    </van-button>
                    <div class="button-spacing"></div>
                    <van-button type="default" round block to="./register">
                        注册
                    </van-button>
                </div>
            </van-form>
        </div>
        <div class="text">
            <p>@bochexianjian.com</p>
        </div>
    </div>
</template>

<script setup>
// 导入依赖
import { } from '../../assets/vars.less'
import { POST } from "../../tools/fetch.js";
import { userApi } from '../../tools/api.js';
// 路由相关的，允许你用js控制路由，跳转组件一点就的走，但是此时控制了，不是直接点了就跳转，需要js控制允许控制转向其他路由
//  控制路由（走的时候）访问路由（来的时候）
// import {useRouter,useRoute} from 'vue-router';
import { useRouter } from 'vue-router';
const router = useRouter();
// token
import { useUserStore } from '../../tools/storage.js';
// 初始化
const userStore = useUserStore();

import { createApp } from 'vue';
import { FloatingBubble } from 'vant';
/*--------------------------------------*/

// 接收用户输入的内容
const enterData = ref({
    mobile: '',
    password: '',
    //手机号正则
    mobileRules: [
        { required: true, message: '手机号不能为空', trigger: 'onSubmit' },
        { pattern: /^1[3456789]\d{9}$/, message: '手机号格式错误', trigger: 'onSubmit' }
    ],
    // 密码的正则 
    passwordRules: [
        { required: true, message: '密码不能为空', trigger: 'onSubmit' },
        { pattern: /^[a-zA-Z][a-zA-Z0-9]{5,7}$/, message: '密码号格式错误', trigger: 'onSubmit' }
    ],
})


//submit方法
const onSubmit = async (value) => {
    //发送请求
    const resResult = await POST({
        api: userApi.login,
        data: {
            phone_number: value.mobile,
            password: value.password
        }
    })
    //把数据存在浏览器
    console.log(resResult);
    userStore.setLogin(resResult.data.token, resResult.data.user);
    //跳转
    router.replace('/home/home')
}


//解决被小键盘顶高问题
const setMetaHeight = (height) => {
    let metaEl = document.head.querySelector("meta[name='viewport']") || document.createElement('meta');
    if (!metaEl.getAttribute('name')) {
        metaEl.setAttribute('name', 'viewport');
        document.head.appendChild(metaEl);
    }
    let content = `height=${height},width=device-width,initial-scale=1.0,user-scalable=no`;
    metaEl.setAttribute('content', content);
}
onMounted(async () => {
    await nextTick();
    let realHeight = window.innerWidth > window.innerHeight ? window.innerWidth : window.innerHeight;
    setMetaHeight(realHeight);
});
</script>

<style lang="less" scoped>
.text {
    text-align: center;
}

.form {
    padding-top: 30vh;

    .van-button {
        background-color: @--base-cyan;
        height: 7vh;
        color: #fff;
        font-size: 20px;
    }

    .van-field {
        font-size: 2vh
    }
}

.button-spacing {
    margin-top: 4vh;
}
</style>